﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--加载js/css需要翻墙！！！-->

    <!-- Include external CSS. -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    @*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">*@

    <!-- Include Editor style. -->
    <link href="~/lib/froala_editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
    <link href="~/lib/froala_editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <!-- Include external JS libs. -->
    <!-- If jquery is loaded from CDN make sure that you remove it from _Layout file -->
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
    @*<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>*@

    <!-- Include Editor JS files. -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"></script>
    <script type="text/javascript" src="~/lib/froala_editor/js/plugins/image.min.js"></script>
    <script type="text/javascript" src="~/lib/froala_editor/js/plugins/image_manager.min.js"></script>
    
    <div class="sample">
        <h2>Image upload example.</h2>
        <textarea id="edit" name="content"></textarea>
        <button onclick="GetContent()">获得html</button>
    </div>

    <!-- Initialize the editor. -->
    <script>
        $(function () {
            $.getScript("https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js", function () {
                $('#edit').froalaEditor({
                    // Set the image upload URL.
                    //设置富文本框上传图片路径
                    imageUploadURL: '/UploadFiles',

                    imageUploadParams: {
                        id: 'my_editor'
                    }
                });
                //赋值富文本框
                $('#edit').froalaEditor('html.set', '<p>ttttt</p>');

            });

        });

        function GetContent() {
            //获得富文本框内容
            var html = $('#edit').froalaEditor('html.get');
            console.log(html);
        }
    </script>
</body>
</html>